<layout
  th:replace="~{views/layout :: layout (
  page = 'moments',
  title = ${site.title} + ' - ' + '瞬间',
  pin = ~{::pin},
  header = ~{::header},
  main = ~{::main}
  )}"
>
  <!--/* pin */-->
  <th:block th:fragment="pin">
    <script id="pageScript" th:inline="javascript">
      Object.assign(window.MainApp.conf, {
        //第一屏
        enable_above: /*[[${theme.config.index.enable_above}]]*/ '',
        above_background: /*[[${theme.config.index.above_background}]]*/ '',
      });
    </script>
  </th:block>

  <!--/* header */-->
  <th:block th:fragment="header">
    <header th:class="${not theme.config.index.enable_above ? 'header dp' : 'header'}">
      <!--/* 导航栏 */-->
      <th:block th:replace="~{views/nav}"/>

      <!--第一屏内容-->
      <section class="above" th:if="${theme.config.index.enable_above}">
        <div class="above-info">
          <h1 class="above-title">瞬间</h1>
        </div>
      </section>
    </header>
  </th:block>


  <!--/* 內容 */-->
  <th:block th:fragment="main">

    <section class="content card animate__animated animate__fadeIn" th:with="noData = ${not #lists.isEmpty(moments.items)}"  th:style="${ noData ?  '' : 'min-height: auto'}">
      <ul class="list" th:if="${noData}">
        <li class="item" th:each="moment : ${moments.items}" th:with="content=${moment.spec.content}">
          <div class="h" th:if="${not #strings.isEmpty(content.html)}" th:utext="${content.html}"></div>

          <div class="medium">
            <th:block th:if="${not #lists.isEmpty(content.medium)}" th:each="momentItem : ${content.medium}">
              <img th:if="${momentItem.type.name == 'PHOTO'}" th:src="${momentItem.url}"/>
              <video controls th:if="${momentItem.type.name == 'VIDEO'}" th:src="${momentItem.url}"></video>
              <audio th:if="${momentItem.type.name == 'AUDIO'}" th:src="${momentItem.url}"></audio>
            </th:block>
          </div>

          <div class="in"></div>
        </li>
      </ul>
      <th:block th:unless="${noData}" th:insert="~{views/components:: emptyData(false)}"></th:block>
    </section>
    <th:block th:replace="~{views/aside::common}"/>
  </th:block>
</layout>